import React, { memo, useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { renderRoutes } from 'react-router-config'
import { Link, useLocation } from 'react-router-dom'
import tabbarList from '../../assets/data/tabbarData'
import { actionCreators } from '../../pages/home/store'
// import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon'
import NumIcon from '../../baseUI/numIcon'
import './Tabbar.css'

const Tabbar = (props) => {
    let { route,count,path,tabbarDisplay} = props
    let { setPathDispatch:setPath} = props
    const {pathname} = useLocation()
    useEffect(()=>{
        setPath(pathname)
    },[])
    
    return (
        <>
        {/* 渲染路由 */}
        {renderRoutes(route.routes)}
        <ul className='tabbar_container' style={{"display":tabbarDisplay?"":"none"}}>
            {
                tabbarList.map((item,index)=>{
                    return (
                        <li key={index} onClick={()=>{setPath(item.path)}} className='tabbar_item'>
                            <Link to={item.path} style={path==item.path?{color:"#f32b1d"}:{}}>
                                <div className={"iconfont "+item.iconClassName}></div>
                                {item.name}
                                {item.name=='购物车' && <NumIcon display={count>0?true:false} top="-0.1rem" left="2.3rem" num={count} />}
                            </Link>
                        </li>
                    )
                })
            }
        </ul>
        
        </>
    )
}

const mapStateToProps = (state)=>{
    return {
        count:state.shoppingCart.shoppingCartCount,
        path:state.home.path,
        tabbarDisplay:state.home.tabbarDisplay
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        setPathDispatch(path){
            dispatch(actionCreators.setPath(path))
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(memo(Tabbar))
